import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import { style } from '../../../../theme/style';
import { GLOBAL } from '../../../../config/global';
import { QuantityInputCpt } from './QuantityInputCpt';
import moment from 'moment';
import MethodUtil from '../../../../utils/MethodUtil';
import ToastUtil from '../../../../utils/toast';

const scale = GLOBAL.SCALE;
export class QuantityCpt extends Component {
	constructor(props) {
		super(props);
		let { data } = this.props.data || {};
		this.state = {
			data,
			checkedAll: false
		}
	}

	componentWillMount () {
		this.setState({
			checkedAll: this._checkAll()
		})
	}

	//全选
	_checkAll = () => {
		let { data } = this.state || {};
		let onoff = true;
		data && data.forEach((item, index) => {
			if (!item.checked) {
				onoff = false;
			}
		})
		return onoff;
	}

	//单选函数
	_checkFn = (itemData, index) => {
		let { data } = this.state || {};
		if (!MethodUtil.countObj.isNumber(itemData.quantity) || itemData.quantity == '' || parseInt(itemData.quantity) > parseInt(itemData.limitTranNum)) {
			ToastUtil.showWarning('请先输入有效的可转单量');
			return
		}
		itemData.checked = !itemData.checked;
		data[index] = itemData;
		this.setState({
			data,
			checkedAll: this._checkAll()
		}, () => {
			this._pushData()
		})
	}

	//全选函数
	_checkAllFn = () => {
		let { checkedAll, data } = this.state || {};
		let onoff = false;
		data && data.forEach(item => {
			if (!MethodUtil.countObj.isNumber(item.quantity) || item.quantity == '' || parseInt(item.quantity) > parseInt(item.limitTranNum)) {
				onoff = true;
			}
		})
		if (onoff) {
			ToastUtil.showWarning('请先输入有效的可转单量');
			return;
		}
		data && data.map((item, index) => {
			item.checked = !checkedAll;
			return item;
		})
		this.setState({
			data,
			checkedAll: !checkedAll
		}, () => {
			this._pushData()
		})
	}

	//输入值改变
	_writeValue = (itemData, index) => {
		let { data } = this.state || {};
		data[index] = itemData;
		this.setState({
			data
		}, () => {
			this._pushData()
		})
	}

	//数据传递给父级
	_pushData = () => {
		let { callBackFn } = this.props || {};
		let { data } = this.state || {};
		let onoff = false;
		data && data.forEach(item => {
			if (!item.checked) {
				onoff = true;
			}
		})
		if (onoff) {
			this.setState({ checkedAll: false })
		}
		callBackFn && callBackFn(data);
	}


	render () {
		let { data, checkedAll } = this.state;
		const checkOn = require('../../../../imgs/order/select-on.png');
		const checkOff = require('../../../../imgs/order/select-off.png');
		return (
			<View style={styles.quantityList}>
				<View style={styles.checkAllBox}>
					<TouchableOpacity style={styles.checkAllClick} onPress={this._checkAllFn}>
						<Image style={styles.selectStyle} source={checkedAll ? checkOff : checkOn} />
						<Text style={styles.checkAll}>全选</Text>
					</TouchableOpacity>
				</View>
				{
					data && data.map((item, index) => {
						let { checked, intentionPlanDate, bidQuantity, limitTranNum, quantity } = item || {};
						return (
							<View style={styles.quantityListItem} key={index}>
								<TouchableOpacity style={styles.selectOpacity} onPress={() => { this._checkFn(item, index) }}>
									<Image style={styles.selectStyle} source={checked ? checkOff : checkOn} />
									<Text style={styles.selectTime}>{intentionPlanDate && moment(intentionPlanDate).format("YYYY-MM-DD") || '-'}</Text>
								</TouchableOpacity>
								<View style={styles.QlSelectBox}>
									<View style={styles.QlSelectLie}>
										<Text style={styles.Qlquantity}>成交量</Text>
										<Text style={styles.QlquantityValue}>{bidQuantity || '-'} 吨</Text>
									</View>
									<View style={styles.QlSelectLie}>
										<QuantityInputCpt callBack={this._writeValue} data={{ value: quantity, maxValue: limitTranNum, index, itemData: item }} />
									</View>
								</View>
							</View>
						)
					})
				}

			</View>)
	}
}
const styles = StyleSheet.create({
	quantityList: {

	},
	quantityListItem: {
		marginLeft: 10 * scale,
		marginRight: 10 * scale,
		marginTop: 10 * scale,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
		backgroundColor: '#F4F7FE'
	},
	QlSelectBox: {
		flexDirection: 'row'
	},
	selectStyle: {
		height: 12 * scale,
		width: 12 * scale
	},
	selectOpacity: {
		flexDirection: 'row',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		alignItems: 'center'
	},
	selectTime: {
		paddingLeft: 10 * scale
	},
	QlSelectLie: {
		width: '50%',
		flexDirection: 'row',
		alignItems: 'center'
	},
	Qlquantity: {
		fontSize: 13 * scale
	},
	QlquantityValue: {
		marginLeft: 6 * scale
	},
	QlquantitInput: {
		backgroundColor: style.color.white,
		height: 30 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale,
		width: 75 * scale,
		marginRight: 5 * scale,
		textAlign: 'center'
	},
	checkAllBox: {
		flexDirection: 'row',
		justifyContent: 'flex-end'
	},
	checkAllClick: {
		flexDirection: 'row',
		alignItems: 'center',
		padding: 8 * scale
	},
	checkAll: {
		fontSize: 14 * scale,
		fontWeight: 'bold',
		paddingLeft: 5 * scale,
		marginRight: 7 * scale
	}
})